<template>
    <div class="sjzxRightBottom">
        <div class="title">
            <!-- {{typeName1}} -->
            森林火险专题图
        </div>
        <div class="themePic">
            <div
                v-for="(item1, index1) in themeList"
                :class="{ themePicItem: true, themePicItemActive: isActive }"
                :key="index1 + 'child'"
                @click="handleFireClick"
            >
                <div class="dataName">{{ item1.name }}</div>
                <div class="contentLine">
                    <img src="/images/sjzx/trangle.png" alt="" />
                </div>
                <div class="num">{{ item1.num }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, reactive, toRefs, onBeforeUnmount } from "vue";
let cityOptions = ["森林火情监测"];
import { useStore } from "vuex";
export default {
    //props:["typeName"],
    setup() {
        let themeList = ref([{ name: "森林火险专题图" }]);
        let isActive = ref(false);
        let store = useStore();
        const state = reactive({
            checkAll: false,
            checkedCities: ["水库", "地质灾害隐患点"],
            cities: cityOptions,
            isIndeterminate: true,
        });
        const handleCheckAllChange = (val) => {
            state.checkedCities = val ? cityOptions : [];
            state.isIndeterminate = false;
        };
        const handleCheckedCitiesChange = (value) => {
            const checkedCount = value.length;
            state.checkAll = checkedCount === state.cities.length;
            state.isIndeterminate =
                checkedCount > 0 && checkedCount < state.cities.length;
        };
        const handleFireClick = () => {
            isActive.value = !isActive.value;
            if (isActive.value) {
                //store.commit("changeSjzxLeftCurrentComponent","SjzxLeftThemePicFire")
                //隐藏左侧面板
                store.commit("changeLeftPanelShow", false);
                //显示图例
                store.commit("changeFireLegendShow", true);
            }
            if (!isActive.value) {
                //显示左侧面板
                store.commit("changeLeftPanelShow", true);
                //显示默认内容，数据治理成果
                if(store.state.userRegion=="海南省"){
                    store.commit("changeSjzxLeftCurrentComponent", "SjzxBasic");
                }else{
                    store.commit("changeSjzxLeftCurrentComponent", "");
                }
                //隐藏图例
                store.commit("changeFireLegendShow", false);
            }
        };
        onBeforeUnmount(() => {
            store.commit("changeLeftPanelShow", true);

            if(store.state.userRegion=="海南省"){
                store.commit("changeSjzxLeftCurrentComponent", "SjzxBasic");
            }else{
                store.commit("changeSjzxLeftCurrentComponent", "");
            }

            store.commit("changeFireLegendShow", false);
        });
        return {
            ...toRefs(state),
            handleCheckAllChange,
            handleCheckedCitiesChange,
            themeList,
            handleFireClick,
            isActive,
        };
    },
};
</script>

<style lang="stylus" scoped>
.sjzxRightBottom {
    background: url('/images/sjzx/list.png') no-repeat;
    background-size: 100% 100%;
    width: vw(370);
    height: vh(555);
    margin-top: vh(15);
    .title {
        text-align: center;
        font-size: vw(16);
    }
    .themePic {
        width: 100%;
        display: grid;
        grid-template-columns: vw(170) vw(200);
        grid-row-gap: vh(20);
        grid-column-gap: vw(20);
        margin-top: vh(50);
        margin-left: vh(20);

        .themePicItem {
            display: flex;
            justify-content: space-around;
            background: url('/images/sjzx/item.png') no-repeat;
            background-size: 100% 100%;
            line-height: vh(37);
            height: vh(37);
            font-size: vw(14);
            margin-right: vw(20);
            cursor: pointer;
        }

        .themePicItemActive {
            div {
                color: #00F4FD;
            }
        }
    }
}
</style>